<template>
  <div class="all">
    <main>
      <form novalidate>
        <div class="AnArea">
          <p>请输入密码</p>
          <input-validate
            v-model="password"
            placeholder="请输入您的密码"
            v-validate="'required|min:6'"
            name="password"
            type="password"
            icon=""
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="您的密码"
            :error="errors.first('password')"
          >
          </input-validate>
        </div>
        <div class="AnArea">
          <p>请确认密码</p>
          <input-validate
            v-model="affirmPwd"
            placeholder="请确认密码"
            name="affirmPwd"
            type="password"
            v-validate="{ required: 'true', is: password }"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="确认密码"
            :error="errors.first('affirmPwd')"
          >
          </input-validate>
        </div>
        <div class="AnArea">
          <p>请输入图形验证码</p>
          <input-validate
            v-model="imgcode"
            placeholder="请输入图形验证码"
            v-validate="'required|max:4'"
            rightType="1"
            :imgUrl="imgSrc"
            name="imgcode"
            type="digit"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="图形验证码"
            :error="errors.first('imgcode')"
            @changeImg="changeImg"
          >
          </input-validate>
        </div>
        <div class="AnArea">
          <p>请输入短信验证码</p>
          <input-validate
            v-model="code"
            placeholder="请输入短信验证码"
            v-validate="'required|max:6'"
            rightType="2"
            name="code"
            type="digit"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="短信验证码"
            :error="errors.first('code')"
            @sendCode="sendCode"
            ref="code"
          >
          </input-validate>
        </div>
        <md-button
          type="primary"
          class="affirmBtn"
          block
          html-type="submit"
          @click="affirmBtn"
          >确认</md-button
        >
      </form>
    </main>
  </div>
</template>

<script>
import { InputItem, Field, Button } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
export default {
  name: "resetLoginPsw",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      password: "",
      affirmPwd: "",
      imgcode: "",
      imgSrc: "",
      code: ""
    };
  },
  methods: {
    getCode() {
      this.$ajax
        .get(this.$api.getPicCode)
        .then(res => {
          this.imgSrc = res.data.code;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    changeImg() {
      this.getCode();
    },
    sendCode() {
      this.$validator
        .validateAll({
          imgcode: this.imgcode,
          password: this.password,
          affirmPwd: this.affirmPwd
        })
        .then(result => {
          if (result) {
            let data = {
              type: "pay",
              code: this.imgcode
            };
            this.$ajax
              .post(this.$api.sendCode, data)
              .then(() => {
                this.$refs.code.countdown();
              })
              .catch(err => {
                this.$toast.failed(err);
              });
          } else {
            this.$toast.failed("请你输入完整信息！");
          }
        });
    },
    affirmBtn() {
      this.$validator.validate().then(result => {
        if (result) {
          this.$ajax
            .post(this.$api.setPayPwd, {
              pay_password: this.affirmPwd,
              code: this.code
            })
            .then(res => {
              this.$toast.succeed(res.data.msg);
              this.$router.go(-1);
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  },
  mounted() {
    this.getCode();
  }
};
</script>

<style scoped lang="stylus">
.all{
  height 100%
  background-color #ffffff;
}
main{
  margin-top 18px;
  padding 28px 23px;
}
.AnArea{
  margin-bottom 39px;
}
.AnArea>p{
  font-size 28px;
  color #333333;
}
.affirmBtn{
  height: 80px;
  background-color #327EB8;
}
.md-button.primary::after{
  border none;
}
</style>
